<template>
    <el-card>
      <el-tabs >
        <el-tab-pane label="数据展示">
          <div class="mod-config">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
              <el-form-item  label="高校">
                <el-autocomplete v-model="dataForm.from" placeholder="学校" clearable :fetch-suggestions="querySearchAsync"
                ></el-autocomplete>
              </el-form-item>

              <el-form-item label="年份" >
                <el-date-picker
                class="crawler_input"
                    v-model="dataForm.year"
                    type="year"
                    value-format="yyyy"
                    placeholder="选择年">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
                <el-button  type="primary" @click="addOrUpdateHandle()">添加高校数据</el-button>

              </el-form-item>
            </el-form>
            <el-table
              :data="dataList"
              border
              v-loading="dataListLoading"
              @sort-change="getSortChange"
              style="width: 100%;">

              <el-table-column
                prop="schoolname"
                header-align="center"
                align="center"
                label="高校">
              </el-table-column>
              <el-table-column
                prop="year"
                header-align="center"
                align="center"
                label="时间">
              </el-table-column>
              <el-table-column
                prop="num"
                header-align="center"
                align="center"
                sortable :sort-orders="['ascending', 'descending']"
                label="总文献">
              </el-table-column>
              <el-table-column
                prop="chNum"
                header-align="center"
                align="center"
                sortable :sort-orders="['ascending', 'descending']"
                label="中文文献">
              </el-table-column>
              <el-table-column
                prop="enNum"
                header-align="center"
                align="center"
                sortable :sort-orders="['ascending', 'descending']"
                label="英文文献">
              </el-table-column>

            </el-table>
            <el-pagination
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              :total="totalPage"
              layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
            <addData v-if="addOrUpdateVisible" ref="addData" @refreshDataList="getDataList"></addData>
          </div>
        </el-tab-pane>
        <el-tab-pane label="可视化分析">
          <Echart></Echart>
        </el-tab-pane>

      </el-tabs>


    </el-card>

  </template>

  <script>
    import { statisticalanalysisApi as sc} from '@/api/statisticalanalysis'
  import addData from './addData.vue'
import Echart from './echart.vue'
    export default {
      data () {
        return {
          dataForm: {
            from: '',
            isAsc:'true',
            order:'',
            year:''
          },
          schools:[],
          isAsc:'true',
          dataList: [],
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0,
          dataListLoading: false,
          dataListSelections: [],
          addOrUpdateVisible: false
        }
      },
      components: {
    addData,
    Echart
},
      mounted () {
        this.getDataList()
        sc.schoolData().then(({name})=>{
            let data = []
            name.forEach(string => {
                data.push({value:string})
            });
            this.schools=data;
        })
      },
      methods: {
        querySearchAsync(queryString, cb){
            let data = this.schools.filter(({value})=>{
                return value.indexOf(queryString)>=0
            })
            cb(data)
        },
        getSortChange(node){

            if(node.order !=null){
                this.dataForm.order = node.prop

               if(node.order=='ascending'){
                this.dataForm.isAsc="true"
               }else if(node.order=='descending'){
                this.dataForm.isAsc="false"
               }

            }else{
                this.dataForm.order=''
            }
            this.getDataList()
        },
        // 获取数据列表
        getDataList () {
          this.dataListLoading = true
          let params = Object.assign(this.dataForm,{
              'page': this.pageIndex,
              'limit': this.pageSize,
            })
            sc.list(params).then(({data}) => {

              this.dataList = data.list
              this.totalPage = data.totalCount

          }).finally(() => {
             this.dataListLoading = false
          });
        },
        // 每页数
        sizeChangeHandle (val) {
          this.pageSize = val
          this.pageIndex = 1
          this.getDataList()
        },
        // 当前页
        currentChangeHandle (val) {
          this.pageIndex = val
          this.getDataList()
        },

        // 新增 / 修改
        addOrUpdateHandle (id) {
          this.addOrUpdateVisible = true
          this.$nextTick(() => {
            this.$refs.addData.init(id)
          })
        },

      }
    }
  </script>
